<template>
  <view>
     <navigator class="back" open-type="navigateBack" hover-class="none">回</navigator>
    <!-- 商品详情轮播图 -->
    <swiper class="swiper" indicator-dots indicator-active-color="#EB4450">
      <swiper-item v-for="(item,index) in pics" :key="item.pics_id" class="swiper-item">
        <image
          @tap="previewImageHandle(index)"
          class="swiper_img"
          :src="item.pics_big_url"
          mode="aspectFill"
        />
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="info">
      <view class="info_head">
        <text class="price">{{goods_price}}</text>
        <view class="opentype_button_wrap iconfont icon-zhuanfa">
          <button class="opentype_button" open-type="share">转发按钮</button>
        </view>
        <view @tap="collectHandle" class="iconfont icon-shoucang1"></view>
      </view>
      <view class="info_name">{{goods_name}}</view>
    </view>
    <!-- 分割 -->
    <view class="divider"></view>

    <!-- 商品详情图 -->
    <view class="detail">
      <view class="detail_head">图文详情</view>
      <!-- rich-text 富文本 在nodes传入数据 -->
      <rich-text :nodes="goods_introduce"></rich-text>
    </view>

    <!-- 底部固定栏 -->
    <view class="bottom">
      <view class="opentype_button_wrap icon_item">
        <button class="opentype_button" open-type="contact">联系客服</button>
        <view class="iconfont icon-kefu"></view>
        <text class="icon_item_text">联系客服</text>
      </view>
      <navigator open-type="switchTab" url="/pages/cart/main" class="icon_item" hover-class="none">
        <view class="iconfont icon-gouwuche"></view>
        <text class="icon_item_text">购物车</text>
      </navigator>
      <view class="button_item" @tap="addCartHandle">加入购物车</view>
      <view class="button_item">立即购买</view>
    </view>
  </view>
</template>

<script>
import { getGoodsDetail } from "@/api";
export default {
  data() {
    return {
      goods_id: "",
      pics: [],
      goods_name: "",
      goods_introduce: "",
      goods_price: "",
      goods_small_logo: ""
    };
  },
  onLoad({ goods_id }) {
    this.goods_id = goods_id;
    this.getGoodsDetailData();
  },
  methods: {
    async getGoodsDetailData() {
      const res = await getGoodsDetail({ goods_id: this.goods_id });
      // console.log(res);
      // 按需提取所需的数据，去掉不必要的数据，节省传输的时间
      let {
        pics,
        goods_price,
        goods_name,
        goods_introduce,
        goods_small_logo
      } = res.data.message;
      this.pics = pics;
      this.goods_price = goods_price;
      this.goods_name = goods_name;
      this.goods_small_logo = goods_small_logo;
      const { system } = uni.getSystemInfoSync();
      // 把系统信息先转换成小写，在判断是否包含 ios 关键词，如果包含说明是 IOS 平台
      const isIOS = system.toLowerCase().includes('ios');
      // console.log(isIOS);
      // 如果是 IOS 平台，就把 webp 图片地址，替换成 jpg 地址
        if(isIOS){
        goods_introduce = goods_introduce.replace(/\.webp/g,'.jpg');
      }
      // this.goods_introduce = goods_introduce;
      // 用正则表达式对富文本内容进行修改
      this.goods_introduce = goods_introduce.replace(
        /<img/g,
        '<img class="rich_img"'
      )
    },
    previewImageHandle(current) {
      const urls = this.pics.map((item) => item.pics_big);
      // console.log(urls);
      uni.previewImage({
        current, // 当前显示图片的http链接
        urls // 需要预览的图片http链接列表
      });
    },
    // 点击收藏按钮
    collectHandle(){
      // 提示用户功能升级中
      wx.showToast({
        title: '功能升级中...',
        icon: 'none',
        duration: 1000
      })
    },
    addCartHandle(){
      // 准备好购物车数组，如果本地存储有就使用本地存储，没有就初始化空数组
      const cartList = uni.getStorageSync('cartList') || [];

      // 判断本地存储中，findIndex查找是否已经添加过当前商品
      const index = cartList.findIndex(
        (item) => item.goods_id === this.goods_id
      );
      // -1找不到的情况
      if(index === -1){
        // 把商品信息添加进去
        cartList.push({
          goods_id:this.goods_id,
          goods_small_logo:this.goods_small_logo,
          goods_name:this.goods_name,
          goods_price:this.goods_price,
          goods_selected:true,
          goods_count:1
        });
      }else{
        // 找到的话，就让数量累加
        cartList[index].goods_count += 1;
      }
      // 存储到本地
      uni.setStorageSync('cartList', cartList)
      // 添加成功后给用户提示
      uni.showToast({
        title: '加入成功',
        duration: 1000,
        mask:true
      });
    }
  },
};
</script>

<style lang="less" >
.back{
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  left:40rpx;
  top:60rpx;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  border-radius: 50%;
}
.swiper,
.swiper_img {
  width: 750rpxx;
  height: 720rpx;
}

.info {
  padding: 20rpx;
  .info_head {
    display: flex;
    .price {
      flex: 1;
      font-size: 36rpx;
    }

    .iconfont{
      font-size: 40rpx;
      color: #707070 ;
      margin-left: 36rpx;
    }
  }

  .info_name {
    margin-top: 20rpx;
    font-size: 30rpx;
    line-height: 42rpx;
  }
}
.detail_head{
  height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
}
  // 通过类名，去除图片底部缝隙
  .rich_img {
    vertical-align: top;
  }

  .bottom {
    border-top: 2rpx solid #ddd;
    width: 750rpx;
    height: 94rpx;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20rpx;
    box-sizing: border-box;
  .icon_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .iconfont.icon-kefu {
        font-size: 44rpx;
    }

    .icon_item_text {
      font-size: 20rpx;
    }
  }

  .button_item {
    width: 196rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #FCAA23;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    color: #fff;
    &:last-child{
      background-color: var(--mainColor);
    }
  }
}
</style>